<%@ page import="au.org.ala.phylojive.Tree" %>



<div class="fieldcontain ${hasErrors(bean: treeInstance, field: 'name', 'error')} required">
	<label for="name">
		<g:message code="tree.name.label" default="Name" />
		<span class="required-indicator">*</span>
	</label>
	<g:textField name="name" required="" value="${treeInstance?.name}"/>
</div>

<div class="fieldcontain ${hasErrors(bean: treeInstance, field: 'owner', 'error')} required">
	<label for="owner">
		<g:message code="tree.owner.label" default="Owner" />
		<span class="required-indicator">*</span>
	</label>
	<g:select id="owner" name="owner.id" from="${au.org.ala.phylojive.User.list()}" optionKey="id" required="" value="${treeInstance?.owner?.id}" class="many-to-one"/>
</div>

<div class="fieldcontain ${hasErrors(bean: treeInstance, field: 'isPublic', 'error')} ">
	<label for="isPublic">
		<g:message code="tree.isPublic.label" default="Is Public" />
		
	</label>
	<g:checkBox name="isPublic" value="${treeInstance?.isPublic}" />
</div>

<div class="fieldcontain ${hasErrors(bean: treeInstance, field: 'tree', 'error')}">
	<label for="tree">
		<g:message code="tree.tree.label" default="Tree (nexml or newick)" />
	</label>
	<g:textArea name="tree" cols="40" rows="5" value="${treeInstance?.tree}"/>
</div>

%{--<div class="fieldcontain ${hasErrors(bean: treeInstance, field: 'nexml', 'error')}">--}%
    %{--<label for="nexml">--}%
        %{--<g:message code="tree.tree.label" default="Nexml" />--}%
    %{--</label>--}%
    %{--<g:textArea name="nexml" cols="40" rows="5" value="${treeInstance?.nexml}"/>--}%
%{--</div>--}%
<div class="fieldcontain">
    <label>
        Search Treebase
    </label>
    <input type="text" id="treebaseQuery" value=""/>
    <script id="templateFormat" type="text/template">
    <tr>
        <td><input type="radio" name="tree" data-value="id"></td>
        <td  data-content='id'></td>
        <td data-content='title'></td>
    </tr>
    </script>
    <div style="" id="dialog-confirm" title="Choose a tree">
        <div id="treebaseList">
        <table class="table">
            <thead>
            <tr>
                <th>Choose</th>
                <th>Tree id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody id="listTrees">
        </tbody>
        </table>
        </div>
        <div id="dialogmsg"><h3>Searching Treebase</h3></div>
        <div id="noresultmsg"><h3 class="alert-info">No results found</h3></div>
        <div id="failuremsg"><h3 class="alert-error">Connection problem! Cannot retrieve data from server. Try again or report to admin.</h3></div>
    </div>
    <script type="text/javascript">
        function search(){
            var url = "${createLink(controller: 'proxy', action: 'searchTreebase')}";
            $('#treebaseList').hide();
            $("#noresultmsg").hide();
            $("#failuremsg").hide();
            $('#dialogmsg').show();
            $.ajax( {
                url: url,
                type:'GET',
                data:{
                    q: $('#treebaseQuery')[0].value
                },
                success:function( data ){
                    $('#dialogmsg').hide();
                    if( data.length ){
                        $('#treebaseList').show();
                        $("#listTrees").loadTemplate( '#templateFormat', data );
                    } else {
                        $("#noresultmsg").show();
                    }

                },
                error:function(){
                    $('#failuremsg').show();
                    $('#dialogmsg').hide();
                }
            });
            $( "#dialog-confirm" ).dialog({
                resizable: false,
                height:400,
                width:500,
                modal: true,
                buttons: {
                    "Choose": function() {
                        console.log($( this).select('input[checked=true]'));
                        var radio = $( this).find('input:checked');
                        if( radio.length ){
                            $('#treebaseId')[0].setAttribute('value',radio[0].value );
                            $( this ).dialog( "close" );
                        } else {
                            alert( "You have not chosen a tree.");
                        }
                    },
                    "Cancel": function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
            return false;
        }
    </script>
    <button id="treebaseSearchBtn" onclick="search(this);return false;">Search</button>
    <i>Search for a study in treebase</i>
</div>

<div class="fieldcontain ${hasErrors(bean: treeInstance, field: 'treebaseId', 'error')}">
    <label for="treebaseId">
        <g:message code="tree.tree.label" default="Treebase Tree ID" />
    </label>
    <g:textField name="treebaseId" value="${treeInstance?.treebaseId}"/>
    <i>eg: Tr2026</i>
</div>

<div class="fieldcontain ${hasErrors(bean: treeInstance, field: 'characters', 'error')} ">
	<label for="characters">
		<g:message code="tree.characters.label" default="Characters" />
		
	</label>
	<g:textArea name="characters" cols="40" rows="5" maxlength="600000" value="${treeInstance?.characters}"/>
    <script type="text/javascript">
        // <!--
        function clickConvert(el) {
            console.log("converting to JSON 3");
            var csv = $(":input#characters").val();
            var separator = $(":input#separator").val();
            //console.log("csv", csv);
            if (csv) {
                var url = "${createLink(controller: 'tree', action: 'convertCsvToJson')}"; // ?csv=" + csv;
                var data = {
                    csv: csv,
                    separator: separator
                }
                //console.log("getJSON url = ", url);
                $.ajax({
                    url: url,
                    type: "POST",
                    data: data,
                    dataType: "text",
                    success: function(data) {
//                        console.log("data = ", data);
                        if (data) {
                            $(":input#characters").val(data);
                        }
                    }
                });
//                $.get(url, data, function(data) {
//                    console.log("data = ", data);
//                    if (data) {
//                        $(":input#characters").val(data);
//                    }
//                });
            }
            return false;
        }

        $(document).ready(function() {
            $(".treeHelp abbr").qtip();
            $( "#dialog-confirm").hide();
            $("#noresultmsg").hide();
            $("#failuremsg").hide();
        });
        // -->
    </script>
    %{--<g:set var="charJsonFormat"><g:message code="tree.characters.charJson"/></g:set>--}%
    %{--<g:set var="charCsvFormat"><g:message code="tree.characters.charCsv"/></g:set>--}%
    <span class="treeHelp">Input characters in <abbr title="${g.message(code:"tree.characters.charJson")}"/>charJSON format</abbr>.
       Alternatively, you can paste <abbr title="${g.message(code:"tree.characters.charCsv")}"/>CSV data</abbr>
        and then click: <button id="convertCsvToJson" onclick="clickConvert(this); return false;">Convert to charJSON</button>
        <br/>internal separator: <input id="separator" size="5" value="" style="width:30px;"> (optional:
        for characters with multiple values)
    </span>
</div>

<div class="fieldcontain ${hasErrors(bean: treeInstance, field: 'attribution', 'error')} ">
	<label for="attribution">
		<g:message code="tree.attribution.label" default="Attribution" />
		
	</label>
	<g:textArea name="attribution" cols="40" rows="5" value="${treeInstance?.attribution}"/>
</div>

<div class="fieldcontain ${hasErrors(bean: treeInstance, field: 'highlight', 'error')} ">
	<label for="highlight">
		<g:message code="tree.highlight.label" default="Highlight" />
		
	</label>
	<g:select name="highlight" from="${1..10}" class="range" value="${fieldValue(bean: treeInstance, field: 'highlight')}" noSelection="['': '']"/>
</div>

<div class="fieldcontain ${hasErrors(bean: treeInstance, field: 'identifyLifeDataset', 'error')} ">
	<label for="identifyLifeDataset">
		<g:message code="tree.identifyLifeDataset.label" default="Identify Life Dataset" />
		
	</label>
	<g:textField name="identifyLifeDataset" value="${treeInstance?.identifyLifeDataset}"/>
</div>

